<template>
  <div class="scene-edit-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">场景编辑</h1>
      </div>
      <div class="header-actions">
        <el-button type="success" icon="Plus">+ 新建场景</el-button>
        <el-button type="primary" icon="DocumentCopy">批量复制</el-button>
        <el-button type="danger" icon="Delete">批量删除</el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon><DataBoard /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">18</div>
          <div class="stat-label">场景总数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon active">
          <el-icon><VideoPlay /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">12</div>
          <div class="stat-label">活跃场景</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon><Monitor /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">98</div>
          <div class="stat-label">设备总数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <el-icon><WarningFilled /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">36</div>
          <div class="stat-label">漏洞总数</div>
        </div>
      </div>
    </div>

    <!-- 搜索和过滤 -->
    <div class="search-filter-bar">
      <div class="search-section">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索场景名称..."
          prefix-icon="Search"
          clearable
          style="width: 300px"
        />
      </div>
      <div>
        <el-select v-model="selectedCategory" placeholder="全部分类" style="width: 150px;margin-right: 10px;">
          <el-option label="全部分类" value="" />
          <el-option label="电力系统" value="power" />
          <el-option label="航电系统" value="avionics" />
          <el-option label="轨道交通" value="railway" />
          <el-option label="工业控制" value="industrial" />
        </el-select>
        <el-select v-model="selectedStatus" placeholder="全部状态" style="width: 150px">
          <el-option label="全部状态" value="" />
          <el-option label="活跃" value="active" />
          <el-option label="草稿" value="draft" />
          <el-option label="停用" value="inactive" />
        </el-select>
      </div>
      <div class="view-toggle">
        <el-button 
          :type="viewMode === 'grid' ? 'primary' : ''" 
          :icon="Grid" 
          @click="viewMode = 'grid'"
          title="网格视图"
        />
        <el-button 
          :type="viewMode === 'list' ? 'primary' : ''" 
          :icon="List" 
          @click="viewMode = 'list'"
          title="列表视图"
        />
      </div>
    </div>

    <!-- 场景卡片网格 -->
    <div class="scenarios-grid" v-if="viewMode === 'grid'">
      <div 
        v-for="scenario in filteredScenarios" 
        :key="scenario.id" 
        class="scenario-card"
      >
        <div class="card-header">
          <div class="scenario-title">
            <el-icon :class="scenario.iconClass">
              <component :is="scenario.icon" />
            </el-icon>
            <span>{{ scenario.name }}</span>
          </div>
          <el-tag 
            :type="getStatusType(scenario.status)" 
            size="small"
          >
            {{ scenario.statusText }}
          </el-tag>
        </div>

        <div class="topology-preview">
          <!-- 电力配电系统场景拓扑图 -->
          <svg v-if="scenario.id === 1" width="100%" height="140" viewBox="0 0 350 140">
            <circle cx="50" cy="70" r="20" fill="#2ecc71"></circle>
            <text x="50" y="75" text-anchor="middle" fill="#fff" font-size="10">主控</text>
            <circle cx="150" cy="35" r="16" fill="#3498db"></circle>
            <text x="150" y="39" text-anchor="middle" fill="#fff" font-size="9">变电站</text>
            <circle cx="150" cy="105" r="16" fill="#9b59b6"></circle>
            <text x="150" y="109" text-anchor="middle" fill="#fff" font-size="9">配电终端</text>
            <circle cx="250" cy="35" r="16" fill="#f1c40f"></circle>
            <text x="250" y="39" text-anchor="middle" fill="#222" font-size="9">监控系统</text>
            <circle cx="250" cy="105" r="16" fill="#e67e22"></circle>
            <text x="250" y="109" text-anchor="middle" fill="#fff" font-size="9">保护装置</text>
            <circle cx="300" cy="70" r="20" fill="#1abc9c"></circle>
            <text x="300" y="75" text-anchor="middle" fill="#fff" font-size="10">调度中心</text>
            <line x1="70" y1="70" x2="134" y2="35" stroke="#2ecc71" stroke-width="2"></line>
            <line x1="70" y1="70" x2="134" y2="105" stroke="#2ecc71" stroke-width="2"></line>
            <line x1="166" y1="35" x2="234" y2="35" stroke="#3498db" stroke-width="2"></line>
            <line x1="166" y1="105" x2="234" y2="105" stroke="#9b59b6" stroke-width="2"></line>
            <line x1="266" y1="35" x2="280" y2="70" stroke="#f1c40f" stroke-width="2"></line>
            <line x1="266" y1="105" x2="280" y2="70" stroke="#e67e22" stroke-width="2"></line>
          </svg>

          <!-- 航电综合测试场景拓扑图 -->
          <svg v-else-if="scenario.id === 2" width="100%" height="140" viewBox="0 0 350 140">
            <circle cx="50" cy="70" r="20" fill="#2ecc71"></circle>
            <text x="50" y="75" text-anchor="middle" fill="#fff" font-size="10">飞控</text>
            <circle cx="150" cy="35" r="16" fill="#3498db"></circle>
            <text x="150" y="39" text-anchor="middle" fill="#fff" font-size="9">导航</text>
            <circle cx="150" cy="105" r="16" fill="#9b59b6"></circle>
            <text x="150" y="109" text-anchor="middle" fill="#fff" font-size="9">雷达</text>
            <circle cx="250" cy="35" r="16" fill="#f1c40f"></circle>
            <text x="250" y="39" text-anchor="middle" fill="#222" font-size="9">地面站</text>
            <circle cx="250" cy="105" r="16" fill="#e67e22"></circle>
            <text x="250" y="109" text-anchor="middle" fill="#fff" font-size="9">通信</text>
            <circle cx="300" cy="70" r="20" fill="#1abc9c"></circle>
            <text x="300" y="75" text-anchor="middle" fill="#fff" font-size="10">显控</text>
            <line x1="70" y1="70" x2="134" y2="35" stroke="#2ecc71" stroke-width="2"></line>
            <line x1="70" y1="70" x2="134" y2="105" stroke="#2ecc71" stroke-width="2"></line>
            <line x1="166" y1="35" x2="234" y2="35" stroke="#3498db" stroke-width="2"></line>
            <line x1="166" y1="105" x2="234" y2="105" stroke="#9b59b6" stroke-width="2"></line>
            <line x1="266" y1="35" x2="280" y2="70" stroke="#f1c40f" stroke-width="2"></line>
            <line x1="266" y1="105" x2="280" y2="70" stroke="#e67e22" stroke-width="2"></line>
          </svg>

          <!-- 机车信号控制场景拓扑图 -->
          <svg v-else-if="scenario.id === 3" width="100%" height="140" viewBox="0 0 350 140">
            <circle cx="50" cy="70" r="20" fill="#2ecc71"></circle>
            <text x="50" y="75" text-anchor="middle" fill="#fff" font-size="10">列控</text>
            <circle cx="150" cy="35" r="16" fill="#3498db"></circle>
            <text x="150" y="39" text-anchor="middle" fill="#fff" font-size="9">信号机</text>
            <circle cx="150" cy="105" r="16" fill="#9b59b6"></circle>
            <text x="150" y="109" text-anchor="middle" fill="#fff" font-size="9">调度</text>
            <circle cx="250" cy="35" r="16" fill="#f1c40f"></circle>
            <text x="250" y="39" text-anchor="middle" fill="#222" font-size="9">车载</text>
            <circle cx="250" cy="105" r="16" fill="#e67e22"></circle>
            <text x="250" y="109" text-anchor="middle" fill="#fff" font-size="9">监控</text>
            <circle cx="300" cy="70" r="20" fill="#1abc9c"></circle>
            <text x="300" y="75" text-anchor="middle" fill="#fff" font-size="10">轨道</text>
            <line x1="70" y1="70" x2="134" y2="35" stroke="#2ecc71" stroke-width="2"></line>
            <line x1="70" y1="70" x2="134" y2="105" stroke="#2ecc71" stroke-width="2"></line>
            <line x1="166" y1="35" x2="234" y2="35" stroke="#3498db" stroke-width="2"></line>
            <line x1="166" y1="105" x2="234" y2="105" stroke="#9b59b6" stroke-width="2"></line>
            <line x1="266" y1="35" x2="280" y2="70" stroke="#f1c40f" stroke-width="2"></line>
            <line x1="266" y1="105" x2="280" y2="70" stroke="#e67e22" stroke-width="2"></line>
          </svg>
        </div>

        <div class="scenario-details">
          <div class="detail-item">
            <span class="label">设备数量:</span>
            <span class="value">{{ scenario.deviceCount }}</span>
          </div>
          <div class="detail-item">
            <span class="label">总线数:</span>
            <span class="value">{{ scenario.busCount }}</span>
          </div>
          <div class="detail-item">
            <span class="label">漏洞数:</span>
            <span class="value">{{ scenario.vulnerabilityCount }}</span>
          </div>
          <div class="detail-item">
            <span class="label">协议:</span>
            <div class="protocol-tags">
              <el-tag 
                v-for="protocol in scenario.protocols" 
                :key="protocol"
                size="small"
                type="info"
              >
                {{ protocol }}
              </el-tag>
            </div>
          </div>
          <div class="detail-item">
            <span class="label">创建时间:</span>
            <span class="value">{{ scenario.createTime }}</span>
          </div>
        </div>

        <div class="card-actions">
          <el-button 
            type="primary" 
            size="small" 
            icon="View"
            @click="previewScenario(scenario)"
          >
            预览
          </el-button>
          <el-button 
            type="warning" 
            size="small" 
            icon="Edit"
            @click="editScenario(scenario)"
          >
            编辑
          </el-button>
          <el-button 
            type="success" 
            size="small" 
            icon="VideoPlay"
            :disabled="scenario.status === 'draft'"
            @click="deployScenario(scenario)"
          >
            部署
          </el-button>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[12, 24, 36, 48]"
        :total="totalScenarios"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Plus, 
  DocumentCopy, 
  Delete, 
  Search, 
  Grid, 
  List, 
  View, 
  Edit, 
  VideoPlay,
  DataBoard,
  Monitor,
  WarningFilled,
  Lightning,
  Location,
  Van
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const searchKeyword = ref('')
const selectedCategory = ref('')
const selectedStatus = ref('')
const viewMode = ref('grid')
const currentPage = ref(1)
const pageSize = ref(12)

// 场景数据
const scenarios = ref([
  {
    id: 1,
    name: '电力配电系统场景',
    icon: 'Lightning',
    iconClass: 'power-icon',
    status: 'active',
    statusText: '活跃',
    deviceCount: 6,
    busCount: 3,
    vulnerabilityCount: 2,
    protocols: ['DNP3', 'Modbus'],
    createTime: '2024-06-01 10:30'
  },
  {
    id: 2,
    name: '航电综合测试场景',
    icon: 'Location',
    iconClass: 'avionics-icon',
    status: 'active',
    statusText: '活跃',
    deviceCount: 6,
    busCount: 4,
    vulnerabilityCount: 3,
    protocols: ['OPC UA', 'ARINC'],
    createTime: '2024-05-28 15:45'
  },
  {
    id: 3,
    name: '机车信号控制场景',
    icon: 'Van',
    iconClass: 'railway-icon',
    status: 'draft',
    statusText: '草稿',
    deviceCount: 6,
    busCount: 2,
    vulnerabilityCount: 1,
    protocols: ['IEC104', 'CAN'],
    createTime: '2024-05-28 09:20'
  }
])

// 计算属性
const filteredScenarios = computed(() => {
  let filtered = scenarios.value

  if (searchKeyword.value) {
    filtered = filtered.filter(scenario => 
      scenario.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }

  if (selectedCategory.value) {
    filtered = filtered.filter(scenario => 
      scenario.category === selectedCategory.value
    )
  }

  if (selectedStatus.value) {
    filtered = filtered.filter(scenario => 
      scenario.status === selectedStatus.value
    )
  }

  return filtered
})

const totalScenarios = computed(() => filteredScenarios.value.length)

// 方法
const getStatusType = (status) => {
  switch (status) {
    case 'active': return 'success'
    case 'draft': return 'warning'
    case 'inactive': return 'info'
    default: return 'info'
  }
}

const previewScenario = (scenario) => {
  console.log('预览场景:', scenario.name)
  // 跳转到预览页面
}

const editScenario = (scenario) => {
  console.log('编辑场景:', scenario.name)
  // 跳转到编辑页面
}

const deployScenario = (scenario) => {
  console.log('部署场景:', scenario.name)
  // 部署场景逻辑
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (page) => {
  currentPage.value = page
}

// 页面初始化
onMounted(() => {
  console.log('场景编辑页面已加载')
})
</script>

<style lang="scss" scoped>
.scene-edit-container {
  min-height: calc(100vh - 50px);
}

  
  .header-left {
    .page-title {
      margin: 0;
      color: var(--text-color);
      font-size: 24px;
      font-weight: 600;
    }
  }
  
  .header-actions {
    display: flex;
    gap: 12px;
  }


.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
  
  .stat-card {
    background: var(--card-bg);
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    
    .stat-icon {
      width: 48px;
      height: 48px;
      border-radius: 8px;
      background: var(--el-color-primary-light-9);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--el-color-primary);
      font-size: 24px;
      
      &.active {
        background: var(--el-color-success-light-9);
        color: var(--el-color-success);
      }
    }
    
    .stat-content {
      .stat-number {
        font-size: 24px;
        font-weight: 600;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 4px;
      }
      
      .stat-label {
        font-size: 14px;
        color: var(--text-color-secondary);
      }
    }
  }
}

.search-filter-bar {
  background: var(--card-bg);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  
  .search-section {
    flex: 1;
  }
  
  .filter-section {
    display: flex;
    gap: 12px;
  }
  
  .view-toggle {
    display: flex;
    gap: 4px;
  }
}

.scenarios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
  
  .scenario-card {
    background: var(--card-bg);
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    padding: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      
      .scenario-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: var(--text-color);
        
        .el-icon {
          font-size: 18px;
          
          &.power-icon {
            color: #f56c6c;
          }
          
          &.avionics-icon {
            color: #409eff;
          }
          
          &.railway-icon {
            color: #67c23a;
          }
        }
      }
    }
    
    .topology-preview {
      margin-bottom: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 12px;
      background: var(--el-bg-color-page);
      border-radius: 6px;
      
      svg {
        width: 100%;
        height: 140px;
        max-width: 350px;
      }
    }
    
    .scenario-details {
      margin-bottom: 16px;
      
      .detail-item {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        
        .label {
          width: 80px;
          font-size: 14px;
          color: var(--text-color-secondary);
        }
        
        .value {
          font-size: 14px;
          color: var(--text-color);
          font-weight: 500;
        }
        
        .protocol-tags {
          display: flex;
          gap: 4px;
        }
      }
    }
    
    .card-actions {
      display: flex;
      gap: 8px;
    }
  }
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

// 响应式设计
@media (max-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .scenarios-grid {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .search-filter-bar {
    flex-direction: column;
    align-items: stretch;
    
    .filter-section {
      justify-content: space-between;
    }
  }
  
  .scenarios-grid {
    grid-template-columns: 1fr;
  }
}
</style> 